<template>
  <div class="container">
    <el-row class="tipBar">
      <el-col class="tip" :lg="16" :md="16" :sm="16" :xs="15">
        <i class="icon iconfont iconfanhui1" @click="goBack"></i>预警详情
      </el-col>
      <el-col
        :span="8"
        class="tipButton"
        v-if="this.alertDetail.status != '已处理' && this.isShow === 'yes'"
      >
        <div>
          <el-button
            round
            type="primary"
            @click="goAddAlertAble()"
            class="saveBtn"
            style="width: 136px; height: 36px"
            v-show="
              this.$store.state.buttonLimitsArr.indexOf('csAlert:update') >
                -1 && this.alertDetail.isShow
            "
            >添加处罚</el-button
          >
          <el-button
            type="primary"
            round
            @click="goEliminateAlertAble()"
            class="saveBtn"
            style="width: 136px; height: 36px"
            v-show="
              this.alertDetail.status == '处理中' &&
              this.$store.state.buttonLimitsArr.indexOf('csAlert:delete') >
                -1 &&
              this.alertDetail.isShow
            "
            >消除预警</el-button
          >
        </div>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row :class="this.isShow == 'yes' ? 'mainConJC' : 'mainConQY'">
        <el-row class="tipBar5" v-if="this.isShow === 'yes'"></el-row>
        <!--预警内容-->
        <el-row>
          <!--左-->
          <el-col class="intervalCss fl" :lg="14" :md="12" :sm="9" :xs="5">
            <el-row class="tip2 alertInfo">
              <ul>
                <li class="clearfix">
                  <div class="left">
                    <span>预警类型：</span>
                    <div class="info">{{ alertDetail.typeName || '--' }}</div>
                  </div>
                  <div class="right">
                    <span>触发项目：</span>
                    <div class="info">
                      {{ alertDetail.projectName || '--' }}
                    </div>
                  </div>
                </li>
                <li class="clearfix">
                  <div class="left">
                    <span>当前状态：</span
                    ><span
                      :class="
                        this.alertDetail.status === '未处理'
                          ? 'picCss2'
                          : this.alertDetail.status === '处理中'
                          ? 'picCss3'
                          : 'picCss4'
                      "
                      >{{ this.alertDetail.status }}</span
                    >
                  </div>
                  <div class="right">
                    <span class="updateTime">最近更新时间：</span>
                    <div class="info infoBox">
                      <template v-if="alertHandleDetail[0]">{{
                        alertHandleDetail[0].handleTime
                          ? alertHandleDetail[0].handleTime
                          : '--'
                      }}</template>
                    </div>
                  </div>
                </li>
              </ul>
            </el-row>
            <!--添加处理记录-->
            <el-row
              v-if="this.alertDetail.status != '已处理' && this.isShow === 'no'"
              style="margin-top: 30px"
            >
              <el-row>
                <el-col>
                  <span class="labelCss2"
                    ><span style="color: #f56c6c">*</span>处理回执：</span
                  >
                  <div class="inforCss itemBlock">
                    <textarea
                      v-model="receipt"
                      style="
                        resize: none;
                        height: 160px;
                        width: 90%;
                        padding: 5px;
                      "
                      placeholder="请详细填写处理回执，告知监察预警处理情况，以免产生处罚，不超过100字。"
                      maxlength="100"
                    ></textarea>
                  </div>
                </el-col>
                <el-col :span="21"></el-col>
              </el-row>
              <el-row style="width: 10%; height: 15px"></el-row>
              <el-row>
                <el-col>
                  <span class="labelCss2"
                    ><span style="color: #f56c6c">*</span>上传附件：</span
                  >
                  <div class="inforCss itemBlock">
                    <el-row class="fileRow">
                      <uploadAnnex
                        @getFileList="getFileList"
                        :limitationFactor="limitationFactor"
                        @getFile="getFile"
                        :upLoadFile="upLoadFile"
                      />
                      <uploadResult
                        :resultList="upLoadFile"
                        @callBackResult="getFile"
                      />
                    </el-row>
                    <el-row>
                      <el-button
                        class="saveBtn commonBut"
                        type="primary"
                        :disabled="disabled"
                        @click="punishAdd()"
                        >提交</el-button
                      >
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-row>
            <!--显示处理记录-->
            <el-row class="borderCss borderCssTitle record"
              >预警处理记录</el-row
            >
            <el-row>
              <template v-for="item in alertHandleDetail">
                <el-row class="borderCss fontCss" :key="item.id">
                  <el-col :lg="1" class="tipBar3 bgcTheme"></el-col>
                  <el-col :lg="23" :md="22" :sm="21">
                    <el-row class="titleCss verticalCss" style="color: #333">{{
                      item.title || '--'
                    }}</el-row>
                    <el-row class="verticalCss bold" style="color: #333">{{
                      item.viceTitle || '--'
                    }}</el-row>
                    <!--消除预警-->
                    <el-row class="fontCss" v-if="item.status === '消除预警'">
                      <el-col :lg="2" class="labelCss">消除原因：</el-col>
                      <el-col :lg="20" :md="20" class="inforCss">{{
                        item.handleReason || '--'
                      }}</el-col>
                    </el-row>
                    <!--处罚记录-->
                    <el-row class="fontCss" v-if="item.status === '处罚预警'">
                      <el-row class="verticalCss2" v-if="item.punishTargetMap">
                        <el-col :lg="2" class="labelCss">处罚对象：</el-col>
                        <el-col :lg="20" :md="20" class="inforCss">
                          <div>{{ item.punishTargetMap.pb.name }}</div>
                          <div>{{ item.punishTargetMap.pc.name }}</div>
                          <div>{{ item.punishTargetMap.manager.name }}</div>
                        </el-col>
                      </el-row>
                      <el-row class="verticalCss2">
                        <el-col :lg="2" class="labelCss">处罚方式：</el-col>
                        <el-col :lg="20" :md="20" class="inforCss">{{
                          item.punishName || '--'
                        }}</el-col>
                      </el-row>
                      <el-row class="verticalCss2">
                        <el-col :lg="2" class="labelCss">处罚原因：</el-col>
                        <el-col :lg="20" :md="20" class="inforCss">{{
                          item.punishReason || '--'
                        }}</el-col>
                      </el-row>
                    </el-row>
                    <!--处理回执-->
                    <el-row class="fontCss" v-if="item.status === '处理预警'">
                      <el-row class="verticalCss2">
                        <el-col :lg="2" class="labelCss">处理回执：</el-col>
                        <el-col :lg="20" :md="20" class="inforCss">{{
                          item.receipt || '--'
                        }}</el-col>
                      </el-row>
                      <el-row
                        class="verticalCss2"
                        v-if="item.receiptImages.length > 0"
                      >
                        <span class="labelCss">附件：</span>
                        <div class="inforCss">
                          <span v-if="item.receiptImages.length > 0">
                            <span>已上传</span>
                            <span
                              class="seeFile"
                              @click="toUploadFile(item.receiptImages)"
                              >查看</span
                            >
                            <contractEnclosureDialog
                              v-if="uploadContract"
                              dialogTitle="预警回执附件"
                              :tableData="tableData"
                              @closeDialog="hiddenDialog"
                            ></contractEnclosureDialog>
                          </span>
                          <span v-else>未上传</span>
                        </div>
                      </el-row>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-row>
          </el-col>
          <!--右-->
          <el-col
            :lg="9"
            :md="9"
            :sm="10"
            :xs="12"
            style="min-width: 250px"
            class="fr"
          >
            <!-- <el-col :lg="9" :md="9" :sm="10" :xs="12" style="margin-left:2%;min-width:250px;"> -->
            <el-row class="intervalCss2 rightBorder">
              <el-row class="right-title fontCss">
                <span class="bold">预警详情</span>
                <span class="date">{{
                  alertDetail.alertTime != null
                    ? alertDetail.alertTime.substr(0, 10)
                    : '--'
                }}</span>
              </el-row>
              <el-row style="width: 100%; height: 10px"></el-row>
              <!-- <el-row class="verticalCss2">
                <span class="projectName bold">{{alertDetail.projectName || "--"}}</span>
                <span class="alertTypeCss">{{alertDetail.typeName || "--"}}</span>
              </el-row> -->
              <el-row class="verticalCss2">
                <el-col
                  class="labelCss fontCss rightLabel"
                  :lg="2"
                  :md="2"
                  :sm="2"
                  :xs="2"
                  >预警原因：</el-col
                >
                <el-col
                  class="inforCss rightContent-size rightInfor"
                  :lg="18"
                  :md="15"
                  :sm="14"
                  :xs="17"
                  >{{ alertDetail.reason || '--' }}
                  <el-link
                    v-if="
                      alertDetail.typeId == '36' || alertDetail.typeId == '37'
                    "
                    style="height: 20px; line-height: 20px"
                    @click="lookAlertList"
                    >(查看明细)</el-link
                  ></el-col
                >
              </el-row>
              <el-row class="verticalCss2">
                <el-col class="labelCss fontCss" :lg="2" :md="2" :sm="2" :xs="2"
                  >处理办法：</el-col
                >
                <el-col
                  class="inforCss rightContent-size"
                  :lg="18"
                  :md="15"
                  :sm="14"
                  :xs="17"
                  >{{ alertDetail.handleWay || '--'
                  }}<el-link
                    @click="jumpMenu"
                    v-if="showHandle"
                    style="margin-left: 10px; position: relative; top: -2px"
                    >去处理>></el-link
                  ></el-col
                >
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="14"
                    :xs="2"
                    >预警天数：</el-col
                  >
                  <el-col :lg="18" :md="15" :sm="14" :xs="17">
                    <span class="inforCss2">{{ alertDetail.alertDays }}</span>
                    <span
                      style="font-size: 14px; display: block; margin-left: 10px"
                      >天</span
                    >
                  </el-col>
                </el-col>
              </el-row>
            </el-row>
            <el-row class="intervalCss2 rightBorder">
              <el-row class="right-title fontCss">
                <el-col :span="10" class="bold">项目信息</el-col>
              </el-row>
              <el-row style="width: 100%; height: 10px"></el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >建设单位：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ alertDetail.pcName || '--' }}</el-col
                  >
                </el-col>
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >施工单位：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ alertDetail.pbName || '--' }}</el-col
                  >
                </el-col>
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >项目经理：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ alertDetail.managerName || '--' }}</el-col
                  >
                </el-col>
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >联系电话：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ alertDetail.managerTel || '--' }}</el-col
                  >
                </el-col>
              </el-row>
            </el-row>
            <el-row
              class="intervalCss2 rightBorder"
              v-if="isEsUser() && girdHandled"
            >
              <el-row class="right-title fontCss">
                <el-col :span="20" class="bold">网格中心处理情况</el-col>
              </el-row>
              <el-row style="width: 100%; height: 10px"></el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >处理人：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ girdInfo.inspector || '--' }}</el-col
                  >
                </el-col>
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >处理时间：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ girdInfo.inspectionTime || '--' }}</el-col
                  >
                </el-col>
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >处理详情：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    >{{ girdInfo.content || '--' }}</el-col
                  >
                </el-col>
              </el-row>
              <el-row class="verticalCss2">
                <el-col>
                  <el-col
                    class="labelCss fontCss"
                    :lg="2"
                    :md="2"
                    :sm="2"
                    :xs="2"
                    >附件：</el-col
                  >
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    v-if="girdInfo.fileExpandVOS.length"
                  >
                    <div v-for="item in girdInfo.fileExpandVOS" :key="item.id">
                      <el-link type="primary">{{ item.name }}</el-link
                      ><el-link type="primary" @click="download(item)"
                        >下载</el-link
                      >
                    </div>
                  </el-col>
                  <el-col
                    class="inforCss rightContent-size"
                    :lg="18"
                    :md="15"
                    :sm="14"
                    :xs="17"
                    v-else
                  >
                    {{ '--' }}
                  </el-col>
                </el-col>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
      <el-dialog
        title="新增处罚"
        :visible.sync="addAlertAble"
        @close="closeDialog('addBox')"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form :model="addForm" :rules="ruleAdd" ref="addBox">
          <el-form-item
            label="处罚对象："
            :label-width="formLabelWidth"
            prop="punishTargetArray"
          >
            <el-checkbox-group
              v-model="addForm.punishTargetArray"
              :class="
                this.unselectedFlag
                  ? 'unselected checkBoxGroup'
                  : 'checkBoxGroup'
              "
            >
              <el-checkbox :label="punishTarget.pc">{{
                alertDetail.pcName + '（建设方）'
              }}</el-checkbox>
              <br />
              <el-checkbox
                :label="punishTarget.pb"
                :value="punishTarget.pb.id"
                >{{ alertDetail.pbName + '（施工方）' }}</el-checkbox
              >
              <br v-if="alertDetail.managerName" />
              <el-checkbox
                :label="punishTarget.manager"
                :value="punishTarget.manager.id"
                v-if="alertDetail.managerName"
                >{{ alertDetail.managerName + '（项目经理）' }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="处罚方式："
            :label-width="formLabelWidth"
            prop="punishId"
          >
            <el-select
              v-model="addForm.punishId"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="处罚原因："
            :label-width="formLabelWidth"
            prop="punishReason"
          >
            <el-input
              type="textarea"
              placeholder="请填写处罚原因，不超过100字。"
              v-model="addForm.punishReason"
              maxlength="100"
              show-word-limit
              rows="4"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancel('addBox')" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveAlert"
            :disabled="disabled"
            class="save"
            >保存</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title="消除预警"
        :visible.sync="eliminateAlertAble"
        @close="closeDialog('eliminateBox')"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
      >
        <el-form :model="eliForm" :rules="ruleEliminate" ref="eliminateBox">
          <el-form-item
            label="消除原因："
            :label-width="formLabelWidth"
            prop="handleReason"
            style="margin-bottom: 30px"
          >
            <el-input
              type="textarea"
              placeholder="请填写消除原因，不超过100字。"
              v-model="eliForm.handleReason"
              maxlength="100"
              show-word-limit
              rows="4"
            ></el-input>
          </el-form-item>
          <el-row style="margin: -10px 0 15px 40px"
            >请核实项目是否如实按照相关规定处理预警。消除后，该项目本次预警将不会再次生成。</el-row
          >
        </el-form>
        <div div slot="footer" class="dialog-footer">
          <el-button @click.native="cancel('eliminateBox')" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveEli"
            :disabled="disabled"
            class="save"
            >保存</el-button
          >
        </div>
      </el-dialog>

      <!-- 查看未发放工资人员明细 -->
      <el-dialog
        title="明细"
        :visible.sync="showEmp"
        @close="showEmp = false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="640px"
      >
        <div class="empList">
          <div class="empListBtn">
            <el-link @click="exportEmp"
              ><i class="icon iconfont icondaochu" style="font-size: 14px"></i>
              导出明细</el-link
            >
          </div>
          <div class="emplists">
            <span v-for="item in alertEmpList" :key="item.employeeId">
              {{ item.employeeName }}、
            </span>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//
import common from '../../kits/common'

export default {
  name: 'constructAlertDetail',
  components: {
    common,
  },
  inject: ['reload'],
  data() {
    //验证处罚对象
    var validatePunishTarget = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请选择处罚对象'))
        this.unselectedFlag = true
      } else {
        callback()
        this.unselectedFlag = false
      }
    }
    //验证处罚原因
    var validatePRS = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('处罚原因不能为空'))
      } else {
        if (value.length > 100) {
          callback(new Error('处罚原因不能超过100字'))
        } else {
          callback()
        }
      }
    }
    //验证消除原因
    var validateType = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('消除原因不能为空'))
      } else {
        if (value.length > 100) {
          callback(new Error('消除原因不能超过100字'))
        } else {
          callback()
        }
      }
    }

    return {
      showHandle: false, //是否展示去处理
      isHandle: '', //是否是处理
      alertDetail: [],
      alertHandleDetail: [],
      typeOptions: [],
      receipt: '',
      upLoadFile: [],
      oldSrcList: [],
      srcList: [], //处理预警上传照片
      uploadUrl: 'api-f/files/upload',
      addAlertAble: false, //新增处罚弹框
      eliminateAlertAble: false, //消除预警弹框
      disabled: false,
      formLabelWidth: '120px',
      unselectedFlag: false,
      ruleAdd: {
        punishTargetArray: [
          {
            required: true,
            validator: validatePunishTarget,
            trigger: 'blur',
          },
        ],
        punishId: [
          {
            required: true,
            message: '请选择处罚方式',
            trigger: 'blur',
          },
        ],
        punishReason: [
          {
            required: true,
            validator: validatePRS,
            trigger: 'blur',
          },
        ],
      },
      punishTarget: {
        pb: {
          id: null,
          name: null,
        },
        pc: {
          id: null,
          name: null,
        },
        manager: {
          id: null,
          name: null,
          tel: null,
        },
      },
      addForm: {
        punishTargetArray: [],
        punishTarget: {
          pb: {
            id: '',
            name: '',
          },
          pc: {
            id: '',
            name: '',
          },
          manager: {
            id: '',
            name: '',
            tel: '',
          },
        },
        punishReason: '',
        punishId: '',
      },
      ruleEliminate: {
        handleReason: [
          {
            required: true,
            validator: validateType,
            trigger: 'blur',
          },
          {},
        ],
      },
      eliForm: {
        handleReason: '',
      },
      isShow: '',
      alertId: '',
      uploadContract: false,
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传处理凭证，如缴存回执单等，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      upLoadFile: [],
      tableData: [], //预警查看附件弹框

      girdInfo: {},
      girdHandled: false,

      alertEmpList: [], //YYYY-M月存在×人有考勤，但未发放工资的人员明细
      showEmp: false,
    }
  },
  created() {
    var query = this.$route.query
    // this.isShow = query.isShow;
    if (localStorage.length > 0) {
      //判断监察还是企业用户登录
      if (
        localStorage.getItem('loginType') === 'QY' ||
        localStorage.getItem('loginType') === 'XM' ||
        localStorage.getItem('loginType') === 'BANK'
      ) {
        this.isShow = 'no'
      } else {
        this.isShow = 'yes'
      }
    } else {
      this.isShow = 'yes'
    }
    this.alertId = query.alertId
    if (query.projectId) {
      this.projectId = query.projectId
    }
    var data = {
      alertId: this.alertId,
    }
    this.getAlertHandleDetail('api-a/cs/alerthandle/expand/handledetail', data) //预警处理记录
    if (this.isShow == 'yes')
      // this.getType("api-bs/base/dicitem/findbytype", {
      //   type: "CS_ALERT_PUNISH_WAY"
      // }); //处罚方式下拉框
      this.getType('api-a/cs/alert/expand/punishtype')
    // 获取是详情还是处理并且要是企业用户
    //企业用户，详情没有操作按钮，处理有，非企业用户查看都有操作按钮 PROJECT_ADMINISTRATOR
    // this.isHandle = query.isHandle || this.$store.state.userType !="COMPANY";
    if (
      this.$store.state.userType == 'COMPANY' ||
      this.$store.state.userType == 'PROJECT_ADMINISTRATOR'
    ) {
      if (!query.isHandle || query.isHandle === 'false') {
        this.isHandle = false
      } else {
        this.isHandle = true
      }
    } else {
      this.isHandle = true
    }

    // 企业  查看详情：任何状态的预警查看详情，页面均无操作按钮
    // 项目  处理：未处理和处理中有添加回执操作 查看详情：任何状态均无操作按钮
    // 监察  查看详情：未处理-添加处罚  处理中-添加处罚和消除预警  已处理-无操作按钮
  },
  async mounted() {
    var data = {
      alertId: this.alertId,
    }
    await this.getAlertDetail('api-a/cs/alert/expand/alterdetail', data) //预警详情
    const { type } = this.$route.query
    const { userType } = this.$store.state
    const { typeId } = this.alertDetail
    const judgeRoleCode = localStorage.getItem('judgeRoleCode')
    let jsfCompanyEnum = [
      '01',
      '02',
      '04',
      '06',
      '09',
      '11',
      '13',
      '20',
      '22',
      '25',
      '26',
      '28',
      '29',
    ] //建设方企业，无工资保证金和工伤保险模块 12,14,21预警
    let sgfCompanyEnum = [
      '01',
      '02',
      '04',
      '06',
      '09',
      '11',
      '12',
      '13',
      '20',
      '21',
      '22',
      '25',
      '26',
      '28',
      '29',
    ] //施工方企业，无工伤保险模块 14预警
    let xmEnum = [
      '01',
      '02',
      '04',
      '06',
      '09',
      '11',
      '12',
      '13',
      '14',
      '20',
      '21',
      '22',
      '25',
      '26',
      '28',
      '29',
    ] //项目端
    if (
      type === 'handle' &&
      ((userType === 'COMPANY' &&
        ((judgeRoleCode === 'owner' && jsfCompanyEnum.indexOf(typeId) !== -1) ||
          (judgeRoleCode === 'constructor' &&
            sgfCompanyEnum.indexOf(typeId) !== -1))) ||
        ((userType === 'PROJECT_ADMINISTRATOR' ||
          userType === 'LABOR_ADMINISTRATOR' ||
          userType === 'FENBAO_MANAGER') &&
          xmEnum.indexOf(typeId) !== -1))
    ) {
      this.showHandle = true //项目或企业端 点击处理跳转此页面 且有对应需跳转的功能模块 才展示去处理按钮
    }
    if (this.isEsUser()) {
      this.getGirdInfo(this.alertId)
    }
  },
  methods: {
    //查看预警原因中   该项目YYYY-M月存在×人有考勤
    lookAlertList() {
      this.axios
        .post('api-a/alertdeductionemps/alertDetail', { alertId: this.alertId })
        .then((res) => {
          if (!res.data.hasError) {
            this.alertEmpList = res.data.result
            this.showEmp = true
          } else {
            this.$message({
              message: res.data.errorCode,
              type: 'warning',
            })
          }
        })
    },
    exportEmp() {
      window.location.href =
        common.commonApi +
        'api-a/alertdeductionemps/export?alertId=' +
        this.alertId +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    download(item) {
      window.open(item.url)
    },
    //获取网格预警处理详情
    getGirdInfo(alertId) {
      this.axios
        .post('api-a/cs/alert/expand/gridAlertHandle', { alertId })
        .then((res) => {
          if (!res.data.hasError) {
            this.girdHandled = true
            this.girdInfo = res.data.result
          } else {
            this.girdHandled = false
          }
        })
    },
    /**
     * @description: 不同预警跳转对应功能菜单
     * @param {*}
     * @return {*}
     */
    jumpMenu() {
      let path = '',
        oldUrl = '',
        name = '',
        query = {}
      switch (this.alertDetail.typeId) {
        case '01': //专户开设备案预警
        case '09': //专户账号错误预警
        case '22': //专户未签约预警
        case '25': //专户余额不符预警
          path = '/home/specialAccount/specialAccountList'
          name = 'specialAccountList'
          oldUrl = '/home/specialAccount/specialAccountList'
          break
        case '06': //未创建拨付计划预警
          path = '/home/specialAccount/specialAccountList'
          name = 'specialAccountList'
          oldUrl = '/home/specialAccount/specialAccountList'
          query = { isShowSecond: true }
          break
        case '02': //童工预警
        case '26': //工程人员实名信息登记预警
        case '28': //未设置劳资专管员预警
        case '29': //劳资专管员资质预警
          path = '/home/employee/projectEmployeeQY'
          name = 'projectEmployeeQY'
          oldUrl = '/home/employee/projectEmployeeQY'
          query = { projectId: this.alertDetail.projectId }
          break
        case '04': //工资拖欠预警
        case '11': //未上传银行回执单预警
        case '20': //未上传工人签字确认表预警
          path = '/home/salaryDf/companySalaryBatchList'
          name = 'companySalaryBatchList'
          oldUrl = '/home/salaryDf/companySalaryBatchList'
          query = { projectId: this.alertDetail.projectId }
          break
        case '12': //工资保证金预警
        case '21': //工资保证金失效预警
          path = '/home/cashDeposit/cashDepositList'
          name = 'cashDepositList'
          oldUrl = '/home/cashDeposit/cashDepositList'
          query = { projectId: this.alertDetail.projectId }
          break
        case '13': //维权公示牌预警
          /* const { userType } = this.$store.state
                const judgeRoleCode = localStorage.getItem("judgeRoleCode")
                //项目首页
                path = "/home/indexHome/projectHome"
                name = "projectHome"
                oldUrl = "/home/indexHome/projectHome"
                if(userType === 'COMPANY'){
                    if(judgeRoleCode==='owner'){//建设方首页
                        path = "/home/indexHome/constructCompanyHomeJS"
                        name = "constructCompanyHomeJS"
                        oldUrl = "/home/indexHome/constructCompanyHomeJS"
                    }else{//施工方首页
                        path = "/home/indexHome/constructCompanyHome"
                        name = "constructCompanyHome"
                        oldUrl = "/home/indexHome/constructCompanyHome"
                    }
                } */
          path = '/home' //企业/项目首页都可直接跳到/home
          this.$store.state.activeMenu = '/home'
          break
        case '14': //工伤保险预警
          path = '/home/EsInsurance/EsInsurance'
          name = 'EsInsurance'
          oldUrl = '/home/EsInsurance/EsInsurance'
          break
        default:
          break
      }
      this.$router.push({
        path,
        name,
        query,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getAlertDetail(urls, datas) {
      return this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.alertDetail = resp.data.result
          this.punishTarget = {
            pb: {
              id: this.alertDetail.pbId,
              name: this.alertDetail.pbName,
              type: 'pb',
            },
            pc: {
              id: this.alertDetail.pcId,
              name: this.alertDetail.pcName,
              type: 'pc',
            },
            manager: {
              id: this.alertDetail.managerId,
              name: this.alertDetail.managerName,
              tel: this.alertDetail.managerTel,
              type: 'manager',
            },
          }
        })
        .catch((resp) => {})
    },
    getAlertHandleDetail(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.alertHandleDetail = resp.data.result
          this.alertHandleDetail.forEach((el) => {
            el.punishTargetMap = JSON.parse(el.punishTarget)
          })
        })
        .catch((resp) => {})
    },
    getType(urls) {
      this.axios({
        method: 'post',
        url: urls,
      })
        .then((resp) => {
          this.typeOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    uploadFileByAjaxSubmit(url) {
      var that = this
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          that.upLoadFile.push(data)
          that.srcList.push(data.url)
          that.oldSrcList.push(data.url)
          $('#alert_file').val('')
        },
        error: function (data) {
          that.$message.error('照片上传失败!')
        },
      }

      $('#huiZhiFileForm').ajaxSubmit(options)

      return false
    },
    punishAdd() {
      var data = {
        receipt: this.receipt,
        alertId: this.alertId,
        fileList: JSON.stringify(this.upLoadFile),
      }
      if (!this.receipt) {
        this.$message({
          message: '请填写处理回执并上传附件！',
          type: 'warning',
        })
        return
      }
      if (this.receipt.length > 100) {
        this.$message({
          message: '回执内容不得超过100字！',
          type: 'warning',
        })
        return
      }
      if (this.upLoadFile.length == 0) {
        this.$message({
          message: '请上传附件',
          type: 'warning',
        })
        return
      }
      this.disabled = true
      this.axios({
        method: 'post',
        url: 'api-a/cs/alerthandle/expand/company/addhandlereceipt',
        data: data,
      })
        .then((resp) => {
          var reData = resp.data
          console.log(reData)
          if (reData.hasError) {
            //alert("保存失败!");
            this.$message({
              message: '保存失败!',
              type: 'warning',
            })
          } else {
            this.reload()
            //alert("\"保存成功!\"");
            this.$message({
              message: '保存成功!',
              type: 'success',
            })
            var dataS = {
              alertId: this.alertId,
            }
            this.getAlertHandleDetail(
              'api-a/cs/alerthandle/expand/handledetail',
              dataS
            )
          }
          this.disabled = false
        })
        .catch((resp) => {
          this.disabled = false
        })
    },
    // 点击添加处罚按钮
    goAddAlertAble() {
      this.addAlertAble = true
    },
    //添加消除预警
    goEliminateAlertAble() {
      this.eliminateAlertAble = true
    },
    //关闭弹窗
    closeDialog(ele) {
      this.$refs[ele].resetFields()
      this.unselectedFlag = false
    },
    // 弹框的取消功能
    cancel(ele) {
      this.$refs[ele].resetFields()
      if (ele == 'addBox') {
        //取消保存修改名称
        this.addAlertAble = false
      } else if (ele == 'eliminateBox') {
        //取消添加下级部门
        this.eliminateAlertAble = false
      }
    },
    //添加处罚
    saveAlert() {
      this.$refs['addBox'].validate((valid) => {
        if (valid) {
          this.addForm.punishTargetArray.forEach((el) => {
            this.addForm.punishTarget[el.type] = el
          })
          this.disabled = true
          this.axios({
            method: 'post',
            url: 'api-a/cs/alerthandle/expand/monitor/addpunish',
            data: {
              alertId: this.alertId,
              punishTarget: JSON.stringify(this.addForm.punishTarget),
              punishId: this.addForm.punishId,
              punishReason: this.addForm.punishReason.trim(),
            },
          })
            .then(
              (response) => {
                if (!response.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                  })
                  this.addAlertAble = false
                  this.reload()
                } else {
                  this.$message({
                    type: 'success',
                    message: response.data.errorMsg,
                  })
                }
              },
              (response) => {
                this.disabled = false
              }
            )
            .catch((error) => {
              this.disabled = false
            })
        } else {
          return false
        }
      })
    },
    //消除预警
    saveEli() {
      this.$refs['eliminateBox'].validate((valid) => {
        if (valid) {
          this.disabled = true
          this.axios({
            method: 'post',
            url: 'api-a/cs/alerthandle/expand/monitor/removealert',
            data: {
              alertId: this.alertId,
              handleReason: this.eliForm.handleReason.trim(),
            },
          })
            .then(
              (response) => {
                if (!response.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '消除成功',
                  })
                  this.eliminateAlertAble = false
                  this.reload()
                } else {
                  this.$message({
                    type: 'success',
                    message: response.data.errorMsg,
                  })
                }
              },
              (response) => {
                this.disabled = false
              }
            )
            .catch((error) => {
              this.disabled = false
            })
        } else {
          return false
        }
      })
    },
    goBack() {
      let routeObj = {
        path: '/home/project/constructAlertProjectList',
        name: 'constructAlertProjectList',
      }
      let oldUrl = '/home/project/constructAlertProjectList'
      let backMethods = 'CHANGE_SLIDER_NAME'
      if (this.$route.query.fromPath === '/home/gridPatrol/patrolTask') {
        routeObj = {
          path: '/home/gridPatrol/patrolTask',
          name: 'patrolTask',
        }
        oldUrl = '/home/gridPatrol/patrolTask'
        backMethods = 'GOBACK_NAME'
      } else {
        if (this.projectId) {
          routeObj.query = { projectId: this.projectId }
        }
      }
      this.$router.push(routeObj)
      this.$store.commit(backMethods, {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toUploadFile(tableData) {
      this.tableData = tableData
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      // this.oldSrcList.push(val);
      this.srcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },
  },
}
</script>

<style scoped lang="less">
.empListBtn {
  padding-top: 8px;
  text-align: left;
}
.emplists {
  padding: 16px 0 0;
  line-height: 26px;

  span {
    display: inline-block;
    margin-right: 10px;
  }
}
.container {
  font-family: SourceHanSansCN-Medium;
  color: #333;
  font-size: 18px;
  @media only screen and (min-width: 1200px) {
    .el-col-lg-18 {
      width: 73%;
    }
    .el-col-lg-20 {
      width: 82.33333%;
    }
  }
}
.iconfanhui1 {
  margin-right: 10px;
}
.record {
  font-weight: bold;
  font-size: 18px;
}
.projectName {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}
.el-col {
  border-radius: 4px;
}
.bold {
  font-weight: bold;
}
.date {
  text-align: right;
  font-size: 16px;
  float: right;
  margin-top: 4px;
}
.intrCss {
  margin-top: 15px;
}
.mainCon {
  padding: 0;
  padding-top: 24px;
  height: calc(100% - 50px);
  overflow-y: auto;
  width: 100%;
}
.tipBar {
  position: relative;
  z-index: 1;
  height: 50px;
  border-bottom: 1px solid #e3e7e9;
  font-size: 18px;
  line-height: 50px;
  font-weight: bold;
  // padding:0 24px;
  // margin:0 24px;
}
.tipBar2 {
  height: 88px;
  margin: 5px 20px 20px 20px;
}
.tipBar3 {
  width: 8px;
  height: 8px;
  background-color: #009588;
  margin: 20px 10px 0 0;
}
.tipBar4 {
  color: #d0d0d8;
  height: 88px;
  line-height: 88px;
}
.tipBar5 {
  height: 20px;
}
.tipBarBox {
  width: 100%;
  height: 50px;
  position: relative;
  &:after {
    position: absolute;
    right: -24px;
    top: 50px;
    left: -24px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e3e7e9;
    z-index: 10;
  }
}
.lineCss {
  width: 100%;
  height: 8px;
  margin-top: 40px;
}
.picCss {
  height: 80px;
  width: 80px;
  font-size: 88px;
  color: #d0d0d8;
}
.picCss2 {
  color: #e02020;
}
.picCss3 {
  color: #67ace4;
}
.picCss4 {
  color: #009689;
}
.fontCss {
  font-size: 14px;
  color: #666;
}
.fontCss2 {
  font-size: 18px;
}
.tip {
  line-height: 50px;
  padding-left: 24px;
  font-weight: bold;
}
.tip2 {
  // height: 120px;
  width: 1000px;
  background-color: #f5f7fa;
  margin-bottom: 15px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.intervalCss {
  // margin: 0 20px;
  // padding: 0 40px 0 0;
  //   overflow: auto;
  height: 587px;
}
.intervalCss2 {
  margin: 0 10px 40px;
}
.processState {
  height: 80px;
  margin-top: 40px;
}
.borderCss {
  padding: 15px 0;
  border-bottom: 1px solid #dee5f4; //修改高度为1px
}
.borderCssTitle {
  padding: 24px 0;
}
.titleCss {
  font-size: 18px;
  font-weight: bold;
}
.verticalCss {
  margin: 10px 0;
}
.verticalCss2 {
  padding: 6px 0;
}
.imgCss {
  width: 70px;
  height: 56px;
  margin: 0 5px;
}
.rightBorder {
  border: 1px solid #dee5f4;
  padding: 20px 15px;
}
.right-title {
  padding: 8px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #dee5f4;
  font-size: 18px;
  color: #333;
}
.alertTypeCss {
  // float: right;
  background-color: #fff1f0;
  text-align: center;
  font-size: 12px;
  margin-left: 5px;
  padding: 4px 5px;
  color: #e74c4c;
  width: 120px;
}
.rightContent-size {
  font-size: 14px;
}
.btnCss {
  text-align: right;
  padding-right: 8px;
  margin-top: 25px;
}
.btnContainer {
  text-align: center;
  margin: 20px 0;
}
.hint {
  float: left;
  display: block;
  width: 27%;
}
.stepCss {
  float: left;
  display: block;
  width: 7%;
  height: 0.7%;
  margin-left: 0.8%;
  margin-right: 0.8%;
}
.imgLabel {
  display: inline-block;
  width: 80px;
  //   float: left;
}
.hintCss {
  display: block;
  margin-left: 80px;
  margin-top: 15px;
}
.hintCss div {
  font-size: 14px;
  font-weight: bolder;
}
.hintCss span {
  font-size: 14px;
  color: #666;
  line-height: 21px;
}
.labelCss {
  display: inline-block;
  width: 78px;
  //   float: left;
  color: #333;
  font-weight: bold;
}
.labelCss2 {
  display: inline-block;
  width: 85px;
  //   float: left;
  font-size: 14px;
  color: #333;
  transform: translateY(-4px);
}
.inforCss {
  display: block;
  color: #666;
  word-break: break-all;
  line-height: 20px;
}
.itemBlock {
  display: inline-block;
  width: calc(100% - 90px);
  vertical-align: top;
}
.inforCss2 {
  font-size: 14px;
  color: #e02020;
  font-weight: bold;
  float: left;
  /*font-size:32px;*/
}
.inforCss3 {
  display: block;
  color: #333;
  /*margin-top: 14px;*/
}
.tipButton {
  text-align: right;
  // padding-right: 16px;
}
.fileRow {
  //   height: 88px;
  width: 100%;
}
// #alert_fileBox {
// margin-left: 80px;
// }
#alert_fileBox ul {
  margin-left: 0 !important;
  margin-top: 10px;
}
#alert_fileBox li {
  position: relative;
  float: left;
  margin-left: 30px;
  margin-top: 10px;
}
#alert_fileBox li .del {
  position: absolute;
  right: -6px;
  top: -8px;
  color: #e81b23;
}

#alert_fileBox li img {
  width: 70px;
  height: 70px;
}
/*上传附件 */
.fileCss {
  position: absolute;
  top: 0;
  left: 0;
  /deep/ #alert_file {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 88px;
    height: 88px;
    cursor: pointer;
  }
}
.unselected {
  border: solid 1px #f56c6c;
  border-radius: 5px;
}
.checkBoxGroup {
  padding: 0px 10px;
}
.mainConQY {
  background-color: #fff;
  padding-bottom: 15px;
  padding-left: 24px;
  padding-right: 24px;
}
.mainConJC {
  height: 740px;
  background-color: #fff;
  padding-bottom: 15px;
  padding-left: 24px;
  padding-right: 24px;
}

.alertInfo {
  padding: 20px 33px;
  font-size: 14px;
  li {
    padding: 10px 0;
    div {
      float: left;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      span {
        width: 72px;
        float: left;
        text-align: left;
      }
      .updateTime {
        width: 98px;
        text-align: left;
      }
      .info {
        float: left;
        width: calc(100% - 75px);
        text-align: left;
        word-break: break-all;
        // word-wrap: break-word;
        // word-break: normal;
      }
      .infoBox {
        width: calc(100% - 100px);
      }
    }
    .left {
      width: 35%;
      text-align: left;
    }
    .right {
      width: 62%;
    }
  }
}
</style>
